<template>
    <div class="common-layout" style="background-color: #f1f1f5;">
      <el-container>
        <el-header style="background-color: #ffff;">
            <p style="margin-top: 15px;">
                <el-button  style="margin-left: 16px" @click="RoomPriceAdd()">新增房价计划</el-button>
            <el-select v-model="roomprice.RoomTypeId" placeholder="选择房型" style="width: 200px; float: right;" @change="RoomPriceList()">
            <el-option v-for="item in roomtypes" :label="item.roomName" :value="item.id" />
            </el-select>
            </p>
        </el-header>
        <el-main>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="roomTypeName" label="房型" width="130" />
                <el-table-column prop="productName" label="产品名称" width="130" />
                <el-table-column prop="breakfastNumber" label="早餐" width="130" />
                <el-table-column prop="salesStrategy" label="销售策略" width="130" />
                <el-table-column prop="payoutMethod" label="付款方式" width="130" >
                    <template #default="{ row }">
                        <el-tag v-if="row.payoutMethod == 1" type="success">预定付费</el-tag>
                        <el-tag v-else type="danger">到店付费</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="130" />
                <el-table-column prop="roomStatus" label="状态" width="130" >
                    <template #default="{ row }">
                        <el-tag v-if="row.roomStatus == 0" type="danger">停用</el-tag>
                        <el-tag v-else type="success">启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="roomSort" label="排序" width="130" />
                <el-table-column prop="address" label="操作" >
                    <template #default="{ row }">
                        <el-button type="text" size="small" @click="RoomPriceUpdate(row)">编辑</el-button>
                        <el-button type="text" size="small" @click="RoomPriceDelete(row)">删除</el-button>
                        <el-button type="text" @click="RoomCodeStatus(row)" v-if="row.roomStatus==1">下架</el-button>
                        <el-button type="text" @click="RoomCodeStatus(row)" v-if="row.roomStatus==0">上架</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <div>
        <el-dialog v-model="roomPriceDialog" title="添加房号" width="500">
            <el-form :model="form">
            <el-form-item label="适用房型" >
            <el-select v-model="form.roomTypeId" placeholder="请选择房型" style="width: 200px;">
            <el-option v-for="item in roomtypes" :label="item.roomName" :value="item.id" />
            </el-select>
            </el-form-item>
            <el-form-item label="产品名称" >
                <el-input v-model="form.productName" placeholder="产品名称" />
            </el-form-item>
            <el-form-item label="标准价" >
                <el-input v-model="form.price" placeholder="标准价" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="收款方式">
                <el-radio-group v-model="form.payoutMethod">
                <el-radio value="true">预定付费</el-radio>
                <el-radio value="false">到店付费</el-radio>
                </el-radio-group>            
            </el-form-item>
            <el-form-item label="住宿优惠">
                <el-checkbox-group v-model="form.accommodationOffers">
                <el-checkbox value="可使用优惠卷抵扣" name="type">
                    可使用优惠卷抵扣
                </el-checkbox>
                <el-checkbox value="可使用现金卷抵扣" name="type">
                    可使用现金卷抵扣
                </el-checkbox> 
            </el-checkbox-group>
            </el-form-item>
            <el-form-item label="会员差价">
                <el-radio-group v-model="form.membershipSpread">
                <el-radio value="1">不设置</el-radio>
                <el-radio value="2">按折扣</el-radio>
                <el-radio value="3">按不同价格</el-radio>
                </el-radio-group>            
            </el-form-item>
            <el-form-item label="早餐份数" >
                <el-input v-model="form.breakfastNumber" placeholder="早餐份数" />
            </el-form-item>
            <el-form-item label="房量数量" >
                <el-input v-model="form.roomNumber" placeholder="房量数量" />
            </el-form-item>
            <el-form-item label="销售策略">
                <el-radio-group v-model="form.salesStrategy">
                <el-radio value="无">无</el-radio>
                <el-radio value="早定优惠">早定优惠</el-radio>
                <el-radio value="限定优惠">限定优惠</el-radio>
                </el-radio-group>            
            </el-form-item>
        </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roomPriceDialog = false">关闭</el-button>
        <el-button type="primary" @click="RoomPriceInsert()">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>



<div>
        <el-dialog v-model="roomPriceUpdateDialog" title="编辑房号" width="500">
            <el-form :model="form1">
            <el-form-item label="适用房型" >
            <el-select v-model="form1.roomTypeId" placeholder="请选择房型" style="width: 200px;">
            <el-option v-for="item in roomtypes" :label="item.roomName" :value="item.id" />
            </el-select>
            </el-form-item>
            <el-form-item label="产品名称" >
                <el-input v-model="form1.productName" placeholder="产品名称" />
            </el-form-item>
            <el-form-item label="标准价" >
                <el-input v-model="form1.price" placeholder="标准价" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="收款方式">
                <el-radio-group v-model="form1.payoutMethod">
                <el-radio value="true">预定付费</el-radio>
                <el-radio value="false">到店付费</el-radio>
                </el-radio-group>            
            </el-form-item>
            <el-form-item label="住宿优惠">
                <el-checkbox-group v-model="form1.accommodationOffers">
                <el-checkbox value="可使用优惠卷抵扣" name="type">
                    可使用优惠卷抵扣
                </el-checkbox>
                <el-checkbox value="可使用现金卷抵扣" name="type">
                    可使用现金卷抵扣
                </el-checkbox> 
            </el-checkbox-group>
            </el-form-item>
            <el-form-item label="会员差价">
                <el-radio-group v-model="form1.membershipSpread">
                <el-radio value="1">不设置</el-radio>
                <el-radio value="2">按折扣</el-radio>
                <el-radio value="3">按不同价格</el-radio>
                </el-radio-group>            
            </el-form-item>
            <el-form-item label="早餐份数" >
                <el-input v-model="form1.breakfastNumber" placeholder="早餐份数" />
            </el-form-item>
            <el-form-item label="房量数量" >
                <el-input v-model="form1.roomNumber" placeholder="房量数量" />
            </el-form-item>
            <el-form-item label="销售策略">
                <el-radio-group v-model="form1.salesStrategy">
                <el-radio value="无">无</el-radio>
                <el-radio value="早定优惠">早定优惠</el-radio>
                <el-radio value="限定优惠">限定优惠</el-radio>
                </el-radio-group>            
            </el-form-item>
        </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roomPriceDialog = false">关闭</el-button>
        <el-button type="primary" @click="RoomPriceUpdates()">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>
        </el-main>
      </el-container>
    </div>
  </template>
  <script lang="ts" setup>
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

  const tableData = ref([])

  onMounted(()=>{
    RoomPriceList()
    roomtypelist();
  })

  const roomprice=reactive({
    RoomTypeId:null,
  })
  const RoomPriceList=()=>{
    axios.get('http://120.26.135.179:8033/api/RoomPrice',{
        params:{
            RoomTypeId:roomprice.RoomTypeId
        }
    }).then(res=>{
      tableData.value = res.data.data;
    })
  }

  //获取房型信息
  const roomtypes=ref(
        [
        {
            roomName:'',
            id:null
        }
        ]
)
//获取房型信息
const roomtypelist=()=>{
    axios.get('http://120.26.135.179:8033/api/RoomType')
    .then((res)=>{
        roomtypes.value=res.data.data;
        console.log(roomtypes.value);
    })
}
//新增房价计划
const roomPriceDialog=ref(false);
const RoomPriceAdd=()=>{
    roomPriceDialog.value=true;
}
const form=reactive({
    roomTypeId:null,
    productName:'',
    price:null,
    payoutMethod:false,
    accommodationOffers:'',
    membershipSpread:0,
    breakfastNumber:null,
    roomNumber:null,
    salesStrategy:'',
    roomStatus:true,
    roomSort:0,
})
//添加房价计划
const RoomPriceInsert=()=>{
    axios.post('http://120.26.135.179:8033/api/RoomPrice',form)
    .then((res)=>{
        console.log(res);
        if(res.data.code==0){
            ElMessage.success(res.data.message);
            roomPriceDialog.value=false;
            RoomPriceList();
        }
        else{
            ElMessage.error(res.data.message);
        }
    })
}
//删除房价计划
const RoomPriceDelete=(row:any)=>{
    ElMessageBox.confirm('确认要删除吗?','错误',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(()=>{
        axios.delete('http://120.26.135.179:8033/api/RoomPirce?Id='+row.id)
        .then((res)=>{
            if(res.data.code==0){
                ElMessage.success(res.data.message)
                RoomPriceList();
            }
            else{
                ElMessage.error(res.data.message)
            }
        })
    })
    .catch(()=>{
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
    })
}
//编辑房价计划
const form1=ref({
    id:null,
    roomTypeId:null,
    productName:'',
    price:null,
    payoutMethod:false,
    accommodationOffers:'',
    membershipSpread:0,
    breakfastNumber:null,
    roomNumber:null,
    salesStrategy:'',
    roomStatus:true,
    roomSort:0,
})
const roomPriceUpdateDialog=ref(false);
const RoomPriceUpdate=(row:any)=>{
    roomPriceUpdateDialog.value=true;
    form1.value=row;
    console.log(form1.value);
}
const RoomPriceUpdates=()=>{
    axios.put('http://120.26.135.179:8033/api/RoomPrice',form1.value).then(res=>{
        if(res.data.code==0){
            ElMessage.success(res.data.message);
            roomPriceUpdateDialog.value=false;
            RoomPriceList();
        }
        else{
            ElMessage.error(res.data.message);
        }
    })
}
//上架下架
const RoomCodeStatus=(row:any)=>{
    ElMessageBox.confirm('确认要修改吗?','错误',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(()=>{
        axios.put('http://120.26.135.179:8033/api/RoomPriceStatus?Id='+row.id)
        .then((res)=>{
            if(res.data.code==0){
                ElMessage.success(res.data.message)
                RoomPriceList();
            }
            else{
                ElMessage.error(res.data.message)
            }
        })
    })
    .catch(()=>{
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
    })
}
  </script>